<template>
  <view class="menu-permissions-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">菜单权限</text>
      <text class="page-subtitle">您可以访问的功能模块列表</text>
    </view>

    <!-- 权限统计 -->
    <view class="stats-card">
      <view class="stats-item">
        <text class="stats-number">{{ menuPermissions.length }}</text>
        <text class="stats-label">可用菜单</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ allMenus.length }}</text>
        <text class="stats-label">总菜单数</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ permissionRate }}%</text>
        <text class="stats-label">权限覆盖率</text>
      </view>
    </view>

    <!-- 菜单权限列表 -->
    <view class="menu-section">
      <view class="section-header">
        <text class="section-title">我的菜单权限</text>
        <text class="section-subtitle">点击菜单可查看详细信息</text>
      </view>
      
      <view class="menu-list">
        <view 
          v-for="menu in menuPermissions" 
          :key="menu.code" 
          class="menu-item"
          @click="showMenuDetail(menu)"
        >
          <view class="menu-icon">
            <u-icon :name="getMenuIcon(menu.code)" size="24" color="#667eea"></u-icon>
          </view>
          <view class="menu-info">
            <text class="menu-name">{{ getMenuName(menu.code) }}</text>
            <text class="menu-desc">{{ getMenuDescription(menu.code) }}</text>
          </view>
          <view class="menu-status">
            <u-icon name="checkmark-circle" size="20" color="#67c23a"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 无权限菜单提示 -->
    <view class="no-permission-section" v-if="noPermissionMenus.length > 0">
      <view class="section-header">
        <text class="section-title">暂无权限的菜单</text>
        <text class="section-subtitle">如需访问请联系管理员</text>
      </view>
      
      <view class="menu-list">
        <view 
          v-for="menu in noPermissionMenus" 
          :key="menu.code" 
          class="menu-item disabled"
        >
          <view class="menu-icon">
            <u-icon :name="getMenuIcon(menu.code)" size="24" color="#cccccc"></u-icon>
          </view>
          <view class="menu-info">
            <text class="menu-name">{{ getMenuName(menu.code) }}</text>
            <text class="menu-desc">{{ getMenuDescription(menu.code) }}</text>
          </view>
          <view class="menu-status">
            <u-icon name="close-circle" size="20" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 权限说明 -->
    <view class="permission-help">
      <view class="help-header">
        <text class="help-title">权限说明</text>
      </view>
      <view class="help-content">
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">菜单权限控制您可以访问的功能模块</text>
        </view>
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">无权限的菜单将无法在应用中显示</text>
        </view>
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">如需更多权限，请联系系统管理员</text>
        </view>
      </view>
    </view>

    <!-- 菜单详情弹窗 -->
    <u-popup v-model="showDetailPopup" mode="center" :round="10">
      <view class="menu-detail-popup">
        <view class="popup-header">
          <text class="popup-title">菜单详情</text>
          <u-icon name="close" @click="showDetailPopup = false" size="20"></u-icon>
        </view>
        <view class="popup-content" v-if="currentMenu">
          <view class="detail-item">
            <text class="detail-label">菜单名称</text>
            <text class="detail-value">{{ getMenuName(currentMenu.code) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">权限代码</text>
            <text class="detail-value">{{ currentMenu.code }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">菜单描述</text>
            <text class="detail-value">{{ getMenuDescription(currentMenu.code) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">访问状态</text>
            <view class="detail-value">
              <u-tag text="已授权" type="success" size="mini"></u-tag>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 刷新按钮 -->
    <view class="refresh-section">
      <u-button 
        type="primary" 
        @click="refreshMenuPermissions"
        :loading="loading"
        class="refresh-button"
      >
        {{ loading ? '刷新中...' : '刷新权限' }}
      </u-button>
    </view>
  </view>
</template>

<script>
import { hasMenuPermission } from '@/utils/permission.js'

// 作者：Wu.Liang
export default {
  name: 'MenuPermissions',
  data() {
    return {
      // 用户菜单权限
      menuPermissions: [],
      // 所有菜单列表
      allMenus: [],
      // 无权限菜单列表
      noPermissionMenus: [],
      // 加载状态
      loading: false,
      // 显示详情弹窗
      showDetailPopup: false,
      // 当前选中的菜单
      currentMenu: null,
      // 菜单配置
      menuConfig: {
        'user:menu': {
          name: '用户管理',
          description: '管理系统用户信息、角色和权限',
          icon: 'account'
        },
        'role:menu': {
          name: '角色管理',
          description: '管理系统角色和权限分配',
          icon: 'shield'
        },
        'permission:menu': {
          name: '权限管理',
          description: '管理系统权限配置',
          icon: 'lock'
        },
        'resident:menu': {
          name: '居民管理',
          description: '管理社区居民信息',
          icon: 'home'
        },
        'property:menu': {
          name: '物业管理',
          description: '管理物业服务和费用',
          icon: 'setting'
        },
        'parking:menu': {
          name: '停车管理',
          description: '管理停车场和车辆信息',
          icon: 'car'
        },
        'payment:menu': {
          name: '缴费管理',
          description: '管理物业费用缴纳',
          icon: 'wallet'
        },
        'complaint:menu': {
          name: '投诉建议',
          description: '处理居民投诉和建议',
          icon: 'chat'
        },
        'emergency:menu': {
          name: '紧急求助',
          description: '处理紧急事件和求助',
          icon: 'phone'
        },
        'security:menu': {
          name: '安防监控',
          description: '监控社区安全状况',
          icon: 'camera'
        },
        'services:menu': {
          name: '便民服务',
          description: '提供便民服务信息',
          icon: 'gift'
        }
      }
    }
  },

  computed: {
    /**
     * 计算权限覆盖率
     */
    permissionRate() {
      if (this.allMenus.length === 0) return 0
      return Math.round((this.menuPermissions.length / this.allMenus.length) * 100)
    }
  },

  onLoad() {
    // 页面权限验证
    if (!validatePagePermission('user:menu')) {
      return
    }
    
    // 获取菜单权限
    this.getMenuPermissions()
  },

  methods: {
    /**
     * 获取菜单权限
     */
    async getMenuPermissions() {
      this.loading = true

      try {
        const result = await this.$api.user.getUserMenus()
        
        if (result.code === 200) {
          this.menuPermissions = result.data || []
          this.generateAllMenus()
          this.generateNoPermissionMenus()
        }
      } catch (error) {
        uni.showToast({
          title: '获取菜单权限失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },

    /**
     * 生成所有菜单列表
     */
    generateAllMenus() {
      this.allMenus = Object.keys(this.menuConfig).map(code => ({
        code,
        ...this.menuConfig[code]
      }))
    },

    /**
     * 生成无权限菜单列表
     */
    generateNoPermissionMenus() {
      this.noPermissionMenus = this.allMenus.filter(menu => 
        !this.menuPermissions.includes(menu.code)
      )
    },

    /**
     * 刷新菜单权限
     */
    async refreshMenuPermissions() {
      await this.getMenuPermissions()
      
      uni.showToast({
        title: '菜单权限已刷新',
        icon: 'success'
      })
    },

    /**
     * 显示菜单详情
     */
    showMenuDetail(menu) {
      this.currentMenu = menu
      this.showDetailPopup = true
    },

    /**
     * 获取菜单名称
     */
    getMenuName(menuCode) {
      return this.menuConfig[menuCode]?.name || menuCode
    },

    /**
     * 获取菜单描述
     */
    getMenuDescription(menuCode) {
      return this.menuConfig[menuCode]?.description || '暂无描述'
    },

    /**
     * 获取菜单图标
     */
    getMenuIcon(menuCode) {
      return this.menuConfig[menuCode]?.icon || 'menu'
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-permissions-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 40rpx;
  text-align: center;

  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
  }

  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.stats-card {
  background: #ffffff;
  margin: -20rpx 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .stats-item {
    text-align: center;

    .stats-number {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #667eea;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.menu-section,
.no-permission-section {
  background: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .section-header {
    padding: 30rpx 40rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .section-subtitle {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.menu-list {
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.3s;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f8f9fa;
    }

    &.disabled {
      opacity: 0.6;
    }

    .menu-icon {
      margin-right: 20rpx;
    }

    .menu-info {
      flex: 1;

      .menu-name {
        display: block;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .menu-desc {
        font-size: 24rpx;
        color: #999999;
        line-height: 1.4;
      }
    }

    .menu-status {
      margin-left: 20rpx;
    }
  }
}

.permission-help {
  background: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .help-header {
    padding: 30rpx 40rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .help-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .help-content {
    padding: 30rpx 40rpx;

    .help-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .help-text {
        font-size: 28rpx;
        color: #666666;
        line-height: 1.4;
        margin-left: 16rpx;
      }
    }
  }
}

.menu-detail-popup {
  width: 600rpx;
  background: #ffffff;
  border-radius: 20rpx;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .popup-content {
    padding: 40rpx;

    .detail-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        width: 120rpx;
        font-size: 28rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .detail-value {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.4;
      }
    }
  }
}

.refresh-section {
  padding: 40rpx 20rpx;

  .refresh-button {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
  }
}
</style> 